<!--
 * @Description: 站点质量参数模板
 * @Autor: yjx
 * @Date: 2021-11-15 09:54:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-30 14:42:06
-->
<template>
    <div class="params_template">
        <div v-if="templateIndex && config.specificationId" class="top">
            <div class="params_type">
                <div v-for="(item, index) in paramsType" :key="index" class="item">
                    <div class="item_color" :style="{background: item.color}"></div>
                    <div class="item_text">{{item.text}}</div>
                </div>
            </div>
            <div class="btn">
                <el-button v-if="templateType === 'site'" size="mini" class="bottom_all" @click="handleSet">设置审核人</el-button>
                <el-button v-if="templateType === 'site'" size="mini" class="bottom_all" @click="handleLook">查看公司标准</el-button>
                <el-button size="mini" class="bottom_all" @click="handleSave">保 存</el-button>
            </div>
        </div>
        <div v-else class="text">暂无数据</div>

        <div class="template_content">
            <Template1 v-if="templateIndex === '1' && config.specificationId" ref="template1" :templateData="templateData"/>
            <Template2 v-if="templateIndex === '2' && config.specificationId" ref="template2" :templateData="templateData"/>
            <Template3 v-if="templateIndex === '3' && config.specificationId" ref="template3" :templateData="templateData"/>
            <Template4 v-if="templateIndex === '4' && config.specificationId" ref="template4" :templateData="templateData"/>
            <Template5 v-if="templateIndex === '5' && config.specificationId" ref="template5" :templateData="templateData"/>
            <Template6 v-if="templateIndex === '6' && config.specificationId" ref="template6" :templateData="templateData"/>
            <Template7 v-if="templateIndex === '7' && config.specificationId" ref="template7" :templateData="templateData"/>
            <Template8 v-if="templateIndex === '8' && config.specificationId" ref="template8" :templateData="templateData"/>
            <Template9 v-if="templateIndex === '9' && config.specificationId" ref="template9" :templateData="templateData"/>
            <Template10 v-if="templateIndex === '10' && config.specificationId" ref="template10" :templateData="templateData"/>
        </div>
        
        <!-- 查看公司标准 -->
        <CompanyStandardDialog :visible.sync="companyStandardVisible" :config="companyStandardConfig" />
        <!-- 设置审核人 -->
        <SetAuditorDialog :visible.sync="setAuditorVisible" :config="setAuditorConfig" />

    </div>
</template>
<script>
import Template1 from "./Template1";
import Template2 from "./Template2";
import Template3 from "./Template3";
import Template4 from "./Template4";
import Template5 from "./Template5";
import Template6 from "./Template6";
import Template7 from "./Template7";
import Template8 from "./Template8";
import Template9 from "./Template9";
import Template10 from "./Template10";
import CompanyStandardDialog from "./CompanyStandardDialog";
import SetAuditorDialog from "./SetAuditorDialog";
import { getQualityDetection1, saveOrUpdate1, getQualityDetection2, saveOrUpdate2 } from "@/api/qualityTemplate"
export default {
    components: {
        Template1,
        Template2,
        Template3,
        Template4,
        Template5,
        Template6,
        Template7,
        Template8,
        Template9,
        Template10,
        CompanyStandardDialog, //查看公司标准
        SetAuditorDialog // 设置审核人
    },
    props: {
        templateIndex: { // 模板索引 1-10 对应10张模板
            type: String,
            default: '',
        },
        templateType: {  // 模板类型 company公司 site站点
            type: String,
            default: '',
        },
        config: { // 模板所需参数
            type: Object,
            default: () => {}
        },
        companyId: { // 公司id
            type: String,
            default: ''
        }
    },
    data() {
        return {
            templateData: {}, // 模板数据
            companyStandardVisible: false,
            companyStandardConfig: {},
            setAuditorVisible: false,
            setAuditorConfig: {},
            paramsType: [
                { text: '需要做检验标准判断的必检项目', color: '#ffff00'},
                { text: '必填项目', color: '#00b14b'},
                { text: '系统带入值', color: '#fdd5b2'},
                { text: '需要做检验标准判断的选检项目', color: '#ffffcd'},
                { text: '默认值', color: '#8062a4'},
                { text: '选填项目', color: '#90d246'},
            ]
        }
    },
    watch: {
        "config.specificationId": function (newVal) {
            if(newVal) {
                if(this.templateType === 'company') {
                    getQualityDetection1(this.config).then(res=>{
                        if(res.data && res.code === 1001) {
                            this.templateData = JSON.parse(res.data.tableSetting).myData || null
                        }
                    })
                } 
                if(this.templateType === 'site') {
                    getQualityDetection2(this.config).then(res=>{
                        if(res.data && res.code === 1001) {
                            this.templateData = JSON.parse(res.data.tableSetting).myData || null
                        }
                    })
                }
            }
        },
    },
    methods: {
        // 格式化数据
        fData(data) {
            if(data && data['hgbz']) {
                let type = null;
                if(Array.isArray(data['hgbz'])) type = 'input'
                if(!Array.isArray(data['hgbz'])) type = 'select'
                if(typeof data['hgbz'] === 'string') type = 'popup'
                if(type === 'input') {
                    const arr = ['合格标准', '相邻波动', '异常标准1', '异常标准2'];
                    return JSON.stringify(Object.values(data).map((item, i)=>({code: i + 1, iteam: arr[i+1], min: item[0], max: item[1], format: i === 0 ? 1 : 2})))
                } else if(type === 'select') {
                    return JSON.stringify(data.hgbz)
                } else if(type === 'popup'){
                    return data.hgbz
                } else {
                    return ''
                }
            } else {
                return ''
            }
            
        },
        handleSet() { // 设置审核人
            this.setAuditorVisible = true;
            this.setAuditorConfig = {...this.config};
        },
        handleLook() { // 查看公司标准
            this.companyStandardVisible = true;
            this.companyStandardConfig = { templateIndex: this.templateIndex, companyId: this.companyId, ...this.config }
        },
        handleSave() { // 保存
            // 校验基本数据是否完整（公司id, 站点id, 原物料id, 规格id）
            const configObj = {
                companyId: '请选择公司',
                stationId: '请选择站点',
                type: '请选择类型',
                nameId: '请选择原物料或强度等级',
                specificationId: '请选择规格'
            }
            if(this.config.type === 1) {
                configObj.nameId = "请选择原物料"
            }
            if(this.config.type === 2) {
                configObj.nameId = "请选择强度等级"
            }
            for(const key in this.config) {
                if(!this.config[key]) {
                    return this.$message.info(configObj[key])
                }
            }
            if(this.config.type === 2) delete params.specificationId;
            // 获取表格数据
            const result = this.$refs['template'+ this.templateIndex].getData();
            if(!result) return false;
            const {data, tableData} = result;
            const params = {
                ...this.config,
                tableSetting: JSON.stringify({...data ,myData: tableData})
            };
            if(this.templateType === 'company') {
                saveOrUpdate1(params).then(res=>{
                    if(res && res.code === 1001) {
                        this.$message.success("保存成功");
                        this.$router.push({
                            name: 'sign_CPYquality',
                            query: {
                                ...this.config,
                                type: 1,
                                templateIndex: this.templateIndex,
                                templateData: JSON.stringify(this.templateData),
                            },
                        })
                    }
                })
            }
            if(this.templateType === 'site') {
                saveOrUpdate2(params).then(res=>{
                    if(res && res.code === 1001) {
                        this.$message.success("保存成功");
                        this.$router.push({
                            name: 'sign_Sitequality',
                            query: {
                                ...this.config,
                                type: 1,
                                templateIndex: this.templateIndex,
                                templateData: JSON.stringify(this.templateData),
                            },
                        })
                    }
                })
            }
        },
    },
}
</script>
<style lang="scss">
$td_width: 100px;
$td_height: 36px;
.params_template {
    width: 100%;
    margin-top: 20px;
    .top {
        display: flex;
        margin-left: 20px;
        .params_type {
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item {
                width: 33%;
                margin-bottom: 16px;
                display: flex;
                .item_color {
                    width: 28px;
                    height: 22px;
                    margin-right: 10px;
                }
                .item_text {
                    font-weight: 400;
                }
            }
        }
        .btn {
            width: 350px;
        }
    }
    .template_content {
        width: 100%;
        height: 430px;
        overflow: auto;
    }
    .text {
        width: 100%;
        height: 500px;
        color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .template_table_parent {
        margin: 0 30px 20px 20px;
        table {
            border-collapse: collapse;
            border: 0 !important;
        }
        td {
            position: relative;
        }
        table,th,td{
            border: 1px solid black;
        }
        .el-date-table {
            table,th,td{
                border: 0;
            }
        }
        .bg1 { // 必检
            background: #ffff00;
            color: red;
            cursor: pointer;
        }
        .bg2 { // 选检
            background: #ffffcd;
            color: red;
            cursor: pointer;
        }
        .bg3 { // 必填
            background: #00b14b;
        }
        .bg4 { // 默认
            background: #8062a4;
        }
        .bg5 { // 系统带入
            background: #fdd5b2;
        }
        .bg6 { // 选填
            background: #90d246;
        }
        .text_color { // 业务数据及系统带入值默认颜色
            color: #777;
        }
        .red { // 配置项颜色
            color: red;
            cursor: pointer;
        }
        .template_table {
            .el-select__caret { // 下拉框的下拉箭头
                display: none;
            }
            .el-textarea__inner { // 文本域设置
                width: 100%;
                height: 100%;
                line-height: 36px;
                border: 0;
                outline: none;
                resize: none;
            }
            .el-input {
                width: 100%;
                text-align: center;
            }
            .el-input__inner {
                width: 100%;
                border: 0;
                border-radius: 0;
                background: transparent;
                color: #000;
                text-align: center;
            }
            .el-input__suffix {
                color: #000
            }
            input::-webkit-input-placeholder{
                color: #000;
            }
            .select_date {
                .el-input__inner {
                    width: 100%;
                    border: 0;
                    border-radius: 0;
                    background: transparent;
                    color: #000;
                    padding: 0 10px;
                    text-align: center;
                }
                .el-input__prefix {
                    display: none;
                }
            }
            tr:first-child, tr:last-child{
                td {
                    border: 0;
                }
            }
            td {
                width: $td_width;
                height: $td_height;
                text-align: center;
            }
        }
    }
    
}
</style>


